<template>
	<view class="bg">
		<xl-navbar title="Calendar日期选择" fixed shadow></xl-navbar>
		<xl-list-item title="基础样式：单个日期" arrow @click="open(1)"></xl-list-item>
		<xl-list-item title="默认日期、限制范围" arrow @click="open(2)"></xl-list-item>
		<xl-list-item title="关闭农历、关闭月份背景" arrow @click="open(3)"></xl-list-item>
		<xl-list-item title="只读状态、关闭确认按钮" arrow @click="open(4)"></xl-list-item>
		<xl-list-item title="多个日期、可限制多个，默认无限" arrow @click="open(5)"></xl-list-item>
		<xl-list-item title="多个日期、默认日期数组" arrow @click="open(6)"></xl-list-item>
		<xl-list-item title="范围日期" arrow @click="open(7)"></xl-list-item>
		<xl-list-item title="范围日期、默认日期两个日期数组" arrow @click="open(8)"></xl-list-item>
		<xl-list-item title="范围日期、修改开始结束以及按钮提示字" arrow @click="open(9)"></xl-list-item>
		<xl-list-item title="范围日期最多可选天数，提示内容" arrow @click="open(10)"></xl-list-item>
		<xl-list-item title="范围日期允许日期范围的起止时间为同一天" arrow @click="open(11)"></xl-list-item>
		<xl-calendar v-model="show1" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show2" defaultDate="2025-01-06" minDate="2025-01-03" maxDate="2025-01-20" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show3" :showLunar="false" :showMark="false" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show4" defaultDate="2025-01-06" readonly :showConfirm="false" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show5" mode="multiple" maxCount="3" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show6" mode="multiple" :defaultDate="['2025-02-06', '2025-02-16', '2025-03-06']" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show7" mode="range" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show8" mode="range" :defaultDate="['2025-02-06', '2025-03-06']" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show9" mode="range" :defaultDate="['2025-02-06', '2025-03-06']" startText="入住" endText="退房" confirmText="确认订房" confirmDisabledText="选择退房日期" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show10" mode="range" maxRange="7" rangePrompt="最多选择7天范围" @confirm="confirm"></xl-calendar>
		<xl-calendar v-model="show11" mode="range" allowSameDay @confirm="confirm"></xl-calendar>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const show1 = ref(false)
	const show2 = ref(false)
	const show3 = ref(false)
	const show4 = ref(false)
	const show5 = ref(false)
	const show6 = ref(false)
	const show7 = ref(false)
	const show8 = ref(false)
	const show9 = ref(false)
	const show10 = ref(false)
	const show11 = ref(false)
	
	function open(index){
		if(index == 1) show1.value = true
		else if(index == 2) show2.value = true
		else if(index == 3) show3.value = true
		else if(index == 4) show4.value = true
		else if(index == 5) show5.value = true
		else if(index == 6) show6.value = true
		else if(index == 7) show7.value = true
		else if(index == 8) show8.value = true
		else if(index == 9) show9.value = true
		else if(index == 10) show10.value = true
		else if(index == 11) show11.value = true
	}
	
	function confirm(value){
		console.log(value);
		uni.$xl.toast(value)
	}
</script>
